<template>
  <!-- 前往发放 -->
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <span
            style="position: relative; top: 20px; left: 20px; font-size: 18px"
            >{{ payrollInfo.paySlipsName }} 发放</span
          >
          <br /><br />
          <el-row :gutter="0">
            <el-col :span="4">
              <div
                :class="1 == number ? 'bg-purple-active' : 'bg-purple'"
                @click="tab(1)"
              >
                <br />
                <span style="font-size: 30px; margin-left: 30px">69人</span>
                <br />
                <span style="font-size: 15px; margin-left: 30px; color: #909399"
                  >计薪人数</span
                >
              </div>
            </el-col>
            <el-col :span="4">
              <div
                :class="2 == number ? 'bg-purple-active' : 'bg-purple'"
                @click="tab(2)"
              >
                <br />
                <span style="font-size: 30px; margin-left: 30px">8人</span>
                <br />
                <span style="font-size: 14px; margin-left: 30px; color: #909399"
                  >本月新入职</span
                >
              </div>
            </el-col>
            <el-col :span="4">
              <div
                :class="3 == number ? 'bg-purple-active' : 'bg-purple'"
                @click="tab(3)"
              >
                <br />
                <span style="font-size: 30px; margin-left: 30px">3人</span>
                <br />
                <span style="font-size: 14px; margin-left: 30px; color: #909399"
                  >本月离职</span
                >
              </div>
            </el-col>
            <el-col :span="4">
              <div
                :class="4 == number ? 'bg-purple-active' : 'bg-purple'"
                @click="tab(4)"
              >
                <br />
                <span style="font-size: 30px; margin-left: 30px">5人</span>
                <br />
                <span style="font-size: 14px; margin-left: 30px; color: #909399"
                  >本月调薪</span
                >
              </div>
            </el-col>
            <el-col :span="4">
              <div
                :class="5 == number ? 'bg-purple-active' : 'bg-purple'"
                @click="tab(5)"
              >
                <br />
                <span style="font-size: 30px; margin-left: 30px">58人</span>
                <br />
                <span style="font-size: 14px; margin-left: 30px; color: #909399"
                  >正式员工</span
                >
              </div>
            </el-col>
            <el-col :span="4">
              <div
                :class="6 == number ? 'bg-purple-active' : 'bg-purple'"
                @click="tab(6)"
              >
                <br />
                <span style="font-size: 30px; margin-left: 30px">11人</span>
                <br />
                <span style="font-size: 14px; margin-left: 30px; color: #909399"
                  >试用期</span
                >
              </div>
            </el-col>
          </el-row>
          <el-row style="padding-left: 20px; padding-top: 30px">
            <el-button type="primary">导出</el-button>
            <el-button>批量发送</el-button>
            <el-button>批量撤回</el-button>
          </el-row>
          <el-form label-width="1090px" style="margin-top: -55px">
            <el-form-item label="关键词">
              <el-input
                v-model="form.name"
                style="width: 200px"
                placeholder="请输入关键词"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div
          class="grid-content bg-purple-dark-two"
          style="padding-left: 25px; padding-top: 20px"
        >
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#f4f4f4' }"
            border
            style="width: 98%"
          >
            <el-table-column
              align="center"
              type="selection"
              width="55"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="姓名"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="部门"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="职位"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="手机号"
              width="150"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="工号"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="发送状态"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="查看状态"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="确认状态"
            ></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text"
                  >发送</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="padding-left: 825px; padding-top: 20px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        currentPage: 1,
        pageSize: 5,
      },
      number: "0",
      tableData: [],
      total: 0,
      payrollInfo:this.$route.query.payrollInfo
    };
  },
  created() {},
  methods: {
    tab(index) {
      this.number = index;
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.findSalaryByIdList();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findSalaryByIdList();
    },
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 15px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: white;
  height: 240px;
}
.bg-purple-dark-two {
  background: white;
  height: 500px;
}
.bg-purple {
  border-radius: 4px;
  min-height: 36px;
  border: 1px solid #c4c6c9;
  margin-left: 13px;
  position: relative;
  top: 20px;
  width: 190px;
  height: 95px;
}
.bg-purple-active {
  border-radius: 4px;
  min-height: 36px;
  border: 1px solid #6d9de5;
  margin-left: 13px;
  position: relative;
  top: 20px;
  width: 190px;
  height: 95px;
  color: #6d9de5;
}
</style>